<template>
<div class="boss">
  <div class="PostDateils">
     <div class="left">
         <el-breadcrumb separator="/" class="titel" style="padding: 10px 0">
         <el-breadcrumb-item to="/post">旅游攻略</el-breadcrumb-item>
         <el-breadcrumb-item>攻略详情</el-breadcrumb-item>
         </el-breadcrumb>
         <h1>{{postDetaList.title}}</h1>
         <hr>
         <div class="post-info">
             <span style="padding:0 20px">攻略：{{postDetaList.created_at | Commenttime}}</span><span>阅读：{{postDetaList.watch}}</span>
         </div>
         <!-- 左边的布局 -->
         <div class="left">
             <div class="content"  v-html="postDetaList.content"></div>
         <!-- 点击评论/分享区 -->
         <div class="ico">
             <div class="one"><i class="el-icon-edit-outline"></i> <p>评论({{postDetaList.comments.length}})</p></div>
             <div class="two"><i class="el-icon-share"></i><p>分享</p></div>
        </div>
         <!-- 引进评论区组件 -->
         <PostComment />
        </div>
     </div>
     <!-- 右边栏的布局 -->
      <el-col class="detail-aside" style="margin-left:20px">
      <h4>相关攻略</h4>
      <ul class="recommend-list">
        <li class="recommend-item">
          <a href="#">
            <el-image class="recommend-item-image" src="http://p1-q.mafengwo.net/s11/M00/B4/92/wKgBEFt6ZqaAJeK7AAbj58wpNlY06.jpeg?imageView2%2F2%2Fw%2F1360%2Fq%2F90" />
            <el-row class="recommend-item-content" type="flex" justify="space-between">
              <h5>小蛮腰广州塔，怎么玩才不遗憾？</h5>
              <p>2019-05-22 1:16 阅读 695</p>
            </el-row>
          </a>
        </li>
      </ul>
    </el-col>
  </div>
</div>
</template>

<script>

import PostComment from '@/components/post/comment/PostComment'
import { postList } from '@/utils/apis/post'
export default {
    components:{
        PostComment
    },
     data() {
    return {
      postDetaList:{
        comments:[],
        title: ''
      },
    }
  },
    async mounted(){
    const id = this.$route.query.id
    let res = await postList({ id })
    console.log(res);
    this.postDetaList = res.data.data[0]
    console.log(this.postDetaList);
    },
    // 过滤器
      filters: {
    Commenttime (time) {
      const date = new Date(time)
      const MM = date.getMonth() + 1
      const YYYYMMDD = [
        date.getFullYear(),
        MM < 10 ? `0${MM}` : MM,
        date.getDate()
      ].join('-')
      const hhmm = [
        date.getHours(),
        date.getMinutes()
      ].join(':')
      return YYYYMMDD + ' ' + hhmm
    }
  },
}
</script>

<style lang="less" scoped>
.boss{
    display: flex;
    justify-content: center;
    // 整体的布局
.PostDateils{
    display: flex;
    justify-content: flex-end;
    .post-info{
    display: flex;
    justify-content: flex-end;
    color:rgb(153, 153, 153);
    padding: 20px 0;
    }
    .left{
    width: 700px;
    .content{
     line-height: 1.5;
    /deep/img{
    max-width: 700px;
    display: block;
        }
    }
}
    .ico{
    width: 700px;
    font-size: 40px;
    color:orange ;
    display: flex;
    justify-content: center;
    .one{
        margin: 0 15px;
        >p{
        font-size: 12px;
        text-align:center;
        color:rgb(153, 153, 153);
        }
    }
    .two{
        >p{
        font-size: 12px;
        text-align:center;
        color:rgb(153, 153, 153);
        }
    }
}
// 右边的布局
 .detail-aside {
    > h4 {
      padding-bottom: 10px;
      font-size: 18px;
      font-weight: 400;
      border-bottom: 1px solid #ddd;
    }

    .recommend-item {
      > a {
        display: flex;
        justify-content: space-between;
        height: 80px;
        padding: 20px 0;
        border-bottom: 1px solid #ddd;
      }
      .recommend-item-image {
        flex-shrink: 0;
        width: 100px;
        height: 80px;
        margin-right: 10px;
      }
       .recommend-item-content {
        flex: 1;
        flex-direction: column;
        h5 {
          height: 2.8em;
          line-height: 1.4em;
          font-size: 16px;
          font-weight: 400;
        }
        p {
          font-size: 12px;
          color: #999;
        }
      }
    }
   }

}
}
</style>
